<template>
  <div>
    <div class=" ii-wrap-mar">
      <div class="ii-wrap-effect">选货大厅 > 销售效果</div>
      <div class="ii-wrap-form">
        <div class="ii-wrap-shopname">
          <p>商品名称: </p>
          <input type="text" placeholder="请输入商品名称" v-model="goodsName">
        </div>
        <div class="select-time">
          <div class="time-left">
            <p class="time-left-txt">下单时间: </p>
            <div class="time-box">
              <div class="time-select">
                <el-date-picker
                  v-model="startTime"
                  :picker-options="startTimeLimit"
                  type="date"
                  size="small"
                  value-format="yyyy-MM-dd"
                  placeholder="开始日期"
                  >
                </el-date-picker>
                <p>-</p>
                <el-date-picker
                  v-model="endTime"
                  :picker-options="endTimeLimit"
                  type="date"
                  size="small"
                  value-format="yyyy-MM-dd"
                  placeholder="结束日期" 
                >
                </el-date-picker>
              </div>
            </div>
          </div>
          <el-button 
            type="primary"
            @click="getSalesReportData"
            class="time-right" 
            plain 
          >查询数据
          </el-button>
        </div>
        <div class="order-description">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="item" :name="changeIndex+''" v-for="(item,changeIndex) in formChangeData" :key="changeIndex"></el-tab-pane>
          </el-tabs>
        </div>
        <!-- 订单折线图 -->
          <div class="echart-wrap">
            <div id="echarts">  
            </div>
          </div>
      </div>
    </div>
    <div class="data-wrap">
    <div class="data-wrap-detail">
      <p class="data-wrap-show">数据明细</p>
      <el-button 
        class="data-wrap-export" 
        type="primary"
        @click="exportDatas" 
      >导出数据
      </el-button>
    </div>
      <div class="table-box">
        <el-table
          :data="tableData"
          border
          :header-cell-style="titleStyleA"
          :cell-style="titleStyle"
          show-header:false
          style="width: 100%">
          <el-table-column
            prop="time"
            label="日期"
          >
          </el-table-column>
          <el-table-column
            prop="orderNum"
            label="订单量"
          >
          </el-table-column>
          <el-table-column
            prop="orderMoney"
            label="订单金额 (元)"
          >
          </el-table-column>
          <el-table-column
            prop="totalCommonIn"
            label="预估收入 (元)"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
async fetch({ store }) {
  await store.commit('setWalletIndex', 1)
  await store.commit('setWalletTwoIndex', 0)
},
layout: "internalouts",
components: {},
data() {
  //设置当前日期小于等于结束日期
  return {
    startTime:'',//开始时间
    endTime:'' ,//结束时间
    goodsName:'',//查询商品名字
    startTimeLimit:{
      disabledDate:(time) =>{
        if(this.endTime){
          return time.getTime() > new Date(this.endTime).getTime();
        }
      },
    },
    endTimeLimit:{
      disabledDate:(time) =>{
        if (this.startTime) {
          return (
            time.getTime() <
            new Date(this.startTime).getTime() - 1 * 24 * 60 * 60 * 1000
          )
        }
      }
    },
    curIndex: 0, //表格订单数据变化的索引
    formChangeData: ["完成订单量", "完成订单金额", "预估收入"],
    tableData: [],
    lineTitle : [],
    orderDataA:[],//订单量的数据
    moneyDataB:[],//订单金额数据
    commInDataC:[],//预估收入数据
    activeName: 0,//tabs默认索引选项
  }
},
  computed:{
    
  },
  // watch:{
  //  shopName(){
      
  //  }
  // },
  methods: {
    titleStyleA(){
      return 'text-align:center;background:#FAFAFA'
    },
    titleStyle({ row, rowIndex }) {
      return "text-align:center";
    },
    exportDatas(){ //导出数据
    //  if(!this.startTime || !this.endTime || !this.goodsName) return;
     this.exportData()
    },
    exportData(){ //提现记录
      this.loading = true;
      let param = {
        endTime:this.endTime,
        startTime:this.startTime,
        goodsName:this.goodsName,
      }
      this.$axios.$post('exportData',param).then(res => {
        this.loading = false;
        if(res.status === 200 ){
         let linkHref = res.obj;
         window.location.href = linkHref;
        }else{
          this.$message.warning(res.msg)
        }
       })
        .catch(error => {
          this.loading = false;
        })
    },                                                      
    getSalesReportData(){
      //清空数据
      this.orderDataA = [];
      this.moneyDataB = [];
      this.commInDataC = [];
      this.lineTitle = [];
      this.tableData = [];
      let param = {
        startTime:this.startTime,
        endTime:this.endTime,
        goodsName:this.goodsName , //传参过去
      }
    this.$axios.$post('salesReport',param).then(res => {
        if(res.status === 200 ){
          this.tableData = res.obj.tableData;
          for(let i in res.obj.lines){
            let line = res.obj.lines[i];
            this.lineTitle.push(line.time);
            this.orderDataA.push(line.orderNum);
            this.moneyDataB.push(line.orderMoney);
            this.commInDataC.push(line.totalCommonIn);
          }
          //默认调取第一个
          this.lineChartInit(this.lineTitle,this.orderDataA,this.formChangeData[0]);
        }else{
          this.$message({
            message:res.msg,  
            type:'warning'
          })
         }
      })
      .catch(error => {
        this.$message({
          message:'请求失败',  
          type:'warning'
        })
        this.loading = false
      })
    },
    handleClick(tab, event) {
      if(tab.index==0){
        this.lineChartInit(this.lineTitle,this.orderDataA,this.formChangeData[0]);
      }else if(tab.index==1){
        this.lineChartInit(this.lineTitle,this.moneyDataB,this.formChangeData[1]);
      }else{
        this.lineChartInit(this.lineTitle,this.commInDataC,this.formChangeData[2]);
      }
    },
    lineChartInit(lineTitle,lineData,name) {//echarts折线图
      var myChart = this.$echarts.init(document.getElementById("echarts"));
      var option = {
        textStyle:{
          color:"#808080"
        },
        tooltip:{
          trigger:'axis'
        },
        xAxis: {
          type: "category",
          data: lineTitle,
          axisLine:{
            lineStyle:{
              color:'#d1d1d1'
            }
          }
        },
        yAxis: {
            // 纵轴标尺固定
          type: "value",
          scale: true,
          min: 0,
          // splitNumber : 5,
          axisLine: {//是否显示y轴坐标轴线
            show: false
          },
          axisTick: {
            show: false
          }
        },
        grid: {//x轴y轴偏移
          x: 45,
          y: 10
        },
        series: [
          {
            data: lineData,
            type: "line",
            name:name,
            symbol: "circle",
            symbolSize: 8,
            lineStyle: {
              color: "#0096e6",
              width: 2,
              type: "solid"
            },
            itemStyle: {
              color: "#0096e6"
            }
          }
        ]
      };
      myChart.setOption(option);
      setTimeout(function (){ //图表自适应
        window.onresize = function () {
          myChart.resize();
        }
	    },200)
    }
  },
  created(){
  },
  mounted() {
    //初始化
    this.getSalesReportData();
  }
};
</script>
<style scoped>
  .ii-wrap-mar {
    margin-top: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .ii-wrap-effect {
    height: 50px;
    line-height: 50px;
    color: #999999;
    font-size: 14px;
  }
  .ii-wrap-form {
    padding-bottom: 10px;
    background: #fff;
  }
  .ii-wrap-shopname {
    width: 444px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0 22px 22px;
    font-size: 14px;
    color: #666666;
  }
  .ii-wrap-shopname input{
    width: 368px;
    height: 34px;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    text-indent: 10px;
    box-sizing: border-box;
  }
  .ii-wrap-shopname input:focus{
    border:1px solid #0096e6;
  }
  input::-webkit-input-placeholder{
		color:#C0C4CC;
	}
	input::-moz-input-placeholder{
		color:#C0C4CC;
	}
	input:-ms-input-placeholder{
		color:#C0C4CC;
	}
  .li-wrap-data-picker {
    width: 650px;
    cursor: pointer;
    position: relative;
  }
  .query-data {
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    background: #0096e6;
    border-radius: 40px;
    position: absolute;
    top: 6px;
    right: -170px;
  }
  .select-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 58% 0 22px;
    margin-bottom: 20px;
  }
  .time-right,.data-wrap-export{
    font-size: 14px;
    background-color: #0096e6;
    color:#fff;
    border-radius:15px;
    padding:8px 22px;
    box-sizing: border-box;
    outline: none;
    border: none;
    cursor: pointer;
  }
  .time-right:hover,.data-wrap-export:hover{
    background:#66B1FF;
  }
  .time-select {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .time-box {
    display: flex;
    align-items: center;
    text-align: center;
  }
  .time-box p {
    width: 30px;
  }
  .time-left {
    display: flex;
    align-items: center;
  }
  .time-left-txt {
    font-size: 14px;
    color: #666;
    margin-right: 16px;
  }
  .table-box {
    margin-bottom: 20px;
    display:block;
  }
  .order-description {
    width: 400px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: flex;
    font-size: 14px;
    color: #333333;
    margin-left: 22px;
    margin-bottom: 22px;
    cursor: pointer;
  }
  .order-description> p {
    height: 40px;
    margin-right: 73px;
    transform: translateX(0px);
  }
  .order-description > p:nth-child(3) {
    margin: 0;
  }
  .order-description .active {
    color: #0096e6;
    border-bottom: 1px solid #0096e6;
  }
  #echarts {
    min-width: 940px;
    height: 337px;
  }
  /* #echarts canvas{
    min-width:940px;
  } */
  .data-wrap {
    margin-top: 20px;
    background: #fff;
    padding: 0 52px 47px;
  }
  .data-wrap-detail {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 14px;
  }
  .data-wrap-show {
    height: 27px;
    color: #0096e6;
    border-bottom: 1px solid #0096e6;
    margin-left: -27px;
  }
  .el-tabs__active-bar {
    height:0.5px;
  }
  .el-input__inner {
    width: 120px;
  }
  .el-date-editor.el-input {
    width: 120px;
  }
  .el-input--small .el-input__inner{
    height:34px;
  }
  /deep/ .el-icon-date::before{
    content:''
  }
</style>
